import React, { Component } from 'react';
import autoBind from 'react-autobind';
import qs from 'qs';
import moment from 'moment'; 
import { Link, browserHistory } from 'dva/router';
import { Tabs, List, Button } from 'antd-mobile';

import { getUserId, getSearch } from '../../../utils/utils'
// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

// widget 
import OrdersBodyItem from './orders-body-item';

class OrdersBody extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        	activeTab: this.getActiveTabFromUrl()
        }
    }

    componentDidMount() {
    	const { dispatch, location } = this.props

        let status = '0'
        let search = getSearch(location)
        if(search.tab == 'nopay') {
            status = '0'
        } else if(search.tab == 'send') {
            status = '1'
        } else if(search.tab == 'receive') {
            status = '2'
        }
    	dispatch({
    		type: 'order/getOrderList',
    		payload: {
    			userId: getUserId(),
    			status: status,
                page: 1,
                pageSize: 500
    		}
    	})
    }

    onTabChange(value) {
    	const { dispatch } = this.props

    	this.setState({
    		activeTab: value
    	})
    	dispatch({
    		type: 'order/getOrderList',
    		payload: {
    			userId: getUserId(),
    			status: value,
                page: 1,
                pageSize: 500
    		}
    	})
    }
    getActiveTabFromUrl() {
    	const searchParm = this.getSearch();
    	let activeTab = '0';

    	switch(searchParm.tab) {
    		case 'nopay':
    			activeTab = '0';
    			break;
    		case 'send':
    			activeTab = '1';
    			break;
    		case 'receive': 
    			activeTab = '2';
    			break
    	}
    	return activeTab
    }

    getSearch() {
    	const { location } = this.props
        let searchParm = location.search.replace('?', '')
        searchParm = qs.parse(searchParm)
        return searchParm
    }

	render() {
		const { order } = this.props

	 	return (
	 		<div className={`${styles["orders-body"]} orders-body`}>
			 	<Tabs activeKey={this.state.activeTab} onChange={this.onTabChange} animated={false}>
		          	<Tabs.TabPane tab="待付款" key="0" >
			            <List className={styles['orders-body-container']} >
			            	{
			            		order.orderList && order.orderList.orderList ? order.orderList.orderList.map((order, item) => {
			            			return <OrdersBodyItem key={item} order={order} orderStatus={0} />
			            		}) : (<div className={styles['orders-body-nodata']}>暂无订单数据</div>)
			            	}
					    </List>
		          	</Tabs.TabPane>
		          	<Tabs.TabPane tab="待发货" key="1">
			            <List className={styles['orders-body-container']}>
			            	{
			            		order.orderList && order.orderList.orderList ? order.orderList.orderList.map((order, item) => {
			            			return <OrdersBodyItem key={item} order={order} orderStatus={1} />
			            		}) : (<div className={styles['orders-body-nodata']}>暂无订单数据</div>)
			            	}
					    </List>
		          	</Tabs.TabPane>
		          	<Tabs.TabPane tab="待收货" key="2">
			            <List className={styles['orders-body-container']}>
			            	{
			            		order.orderList && order.orderList.orderList ? order.orderList.orderList.map((order, item) => {
			            			return <OrdersBodyItem key={item} order={order} orderStatus={2} />
			            		}) : (<div className={styles['orders-body-nodata']}>暂无订单数据</div>)
			            	}
					    </List>
		          	</Tabs.TabPane>
		        </Tabs>
	 		</div>
	  	);
	}
};

OrdersBody.propTypes = {
};

export default OrdersBody
